<template>
  <div class="file">
    <app-prompt class="file-item" v-for="item in files" :title="title" @click="handleClick(item)">
      <template #icon>
        <img v-if="type == 'doc'" src="/icon/doc.png" />
        <img v-else-if="type == 'html'" src="/icon/web.png" />
      </template>
      <template #arrow>
        <span style="transform: rotate(180deg); display: inline-block">👇</span>
      </template>
    </app-prompt>
  </div>
</template>
<script setup>
const emit = defineEmits(['end', 'click'])
const props = defineProps({
  files: Array,
  type: String,
})

onMounted(() => {
  emit('end')
})

const title = computed(() => {
  return {
    doc: '文档预览',
    html: '网页预览',
  }[props.type]
})

const handleClick = item => {
  emit('click', item)
}
</script>
<style lang="scss" scoped>
.file {
  cursor: pointer;
}
img {
  width: 24px;
  height: 24px;
}
</style>
